<template>
  <el-row class="page-products">
    <el-col :span="19">
      <crumbs :keyword="keyword" />

      <category 
        :types="types"
        :areas="areas"
      />

      <list :list="list" />
    </el-col>

    <el-col :span="5">
      <a-map 
        v-if="point.length"
        :width="230"
        :height="290"
        :point="point"
      />
    </el-col>
  </el-row>
</template>

<script>
import Crumbs from '@/components/products/crumbs.vue'
import Category from '@/components/products/category.vue'
import List from '@/components/products/list.vue'
import AMap from '@/components/public/map.vue'

export default {
  components: {
    Crumbs,
    Category,
    List,
    AMap
  },
  data() {
    return {
      list: [],
      types: [],
      areas: [],
      keyword: '',
      point: []
    }
  },
  async asyncData(ctx) {
    let keyword = ctx.query.keyword
    let city = ctx.store.state.geo.position.city
    let {status: poisStatus, data: {count, pois}} = await ctx.$axios.get('/search/resultsByKeywords', {
      params: {
        keyword: decodeURIComponent(keyword),
        city
      }
    })

    let {status: areasStatus, data: {areas, types}} = await ctx.$axios.get('/category/crumbs', {
      params: {
        city
      }
    })

    if (poisStatus === 200 && count > 0 && areasStatus === 200) {
      return {
        keyword,
        areas: areas.filter(item => item.type !== '').slice(0, 5),
        types: types.filter(item => item.type !== '').slice(0, 5),
        point: (pois.find(item => item.location).location || '').split(','),
        list: pois.filter(item => item.photos.length).map(item => {
          return {
            type: item.type,
            img: item.photos[0].url,
            name: item.name,
            comment: Math.floor(Math.random() * 10000),
            rate: Number(item.biz_ext.rating),
            price: Number(item.biz_ext.cost),
            scene: item.tag,
            tel: item.tel,
            status: "可订明日",
            location: item.location,
            module: item.type.split(';')[0]
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .page-products
    width 1190px
    margin 0 auto 
    padding-top 10px
</style>

